<div class="row">
    <div class="col-md-12">

        <div class="box">
            @if(isset($title))
                <div class="box-header with-border">
                    <h3 class="box-title"> {{ $title }}</h3>
                </div>
            @endif
            <div class="box-header with-border clearfix">
                <div style="padding: 10px;">库存总金额 ： {{ $amount }}</div>
            </div>
            <div class="box-body table-responsive no-padding">
                <table id="dt_basic" class="table table-striped table-bordered">
                    <thead>
                    <tr>
                        <th class="hasinput">
                            <label>
                                <input type="text" class="form-control" placeholder="查找ID"/>
                            </label>
                        </th>
                        <th class="hasinput">
                            <label>
                                <input type="text" class="form-control" placeholder="查找USASIN"/>
                            </label>
                        </th>
                        <th class="hasinput">
                            <label>
                                <input type="text" class="form-control" placeholder="查找USSKU"/>
                            </label>
                        </th>
                        <th class="hasinput">
                            <label>
                                <input type="text" class="form-control" placeholder="查找CASKU"/>
                            </label>
                        </th>
                        <th class="hasinput">
                            <label>
                                <input type="text" class="form-control" placeholder="查找UKSKU"/>
                            </label>
                        </th>

                        <th class="hasinput">
                            <label>
                                <input type="text" class="form-control" placeholder="查找JPSKU"/>
                            </label>
                        </th>
                        <th class="hasinput">
                            <label>
                                <input type="text" class="form-control" placeholder="查找USFNSKU"/>
                            </label>
                        </th>
                        <th class="hasinput">
                        </th>
                        <th class="hasinput">
                        </th>
                        <th class="hasinput">
                        </th>
                        <th class="hasinput">
                        </th>
                        <th class="hasinput">
                        </th>
                        <th class="hasinput">
                        </th>
                        <th class="hasinput">
                        </th>
                        <th class="hasinput">
                        </th>

                    </tr>
                    <tr>
                        <th>序号</th>
                        <th>USASIN</th>
                        <th>USSKU</th>
                        <th>CASKU</th>
                        <th>UKSKU</th>
                        <th>JPSKU</th>
                        <th>USFNSKU</th>
                        <th>Amazon图片</th>
                        <th>导入的图片</th>
                        <th>库存</th>
                        <th>成本价</th>
                        <th>成本价X库存</th>
                        <th>管理员备注</th>
                        <th>客服备注</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                </table>
            </div>


        </div>
    </div>
</div>


<div class="modal in" tabindex="-1" role="dialog" id="price-modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">×</span></button>
                <h4 class="modal-title">定价</h4>
            </div>
            <div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>成本价</label>
                        <input type="hidden" id="goodId" name="goodId" class="form-control">
                        <input type="text" id="price" name="price" class="form-control" placeholder="输入成本价">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="set-price">提交</button>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>


<div class="modal in" tabindex="-1" role="dialog" id="remark-modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">×</span></button>
                <h4 class="modal-title">备注</h4>
            </div>
            <div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>备注</label>
                        <input type="hidden" id="remark-goodId" name="goodId" class="form-control">
                        <input type="text" id="remark" name="content" class="form-control" placeholder="输入备注">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="set-remark">提交</button>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>


<div class="modal fade" id="img" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body"
                 id="div_src">
                <img id="img_src" class="center-block img-responsive"  src="" alt="">
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>


<script>

    $(function () {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });


        var otable = $('#dt_basic').DataTable({
            "rowCallback": function (nRow) {

            },
            "dom": 'lBrtip',
            "lengthChange": false,
            "sScrollX": "100%",
            "sScrollXInner": "110%",
            "bScrollCollapse": true,
            "processing": true,
            "serverSide": true,
            "bDeferRender": true,
            "paging": true,//开启表格分页
            "order": [[0, "desc"]],
            "ajax": {
                url: '/good/getGoodList',
                type: 'GET'
            },
            "columns": [
                {"data": "id", 'name': 'id', "width": "5%"},
                {"data": "asin", 'name': 'asin', "width": "6%"},
                {"data": "sku", 'name': 'sku', "width": "6%"},
                {"data": "casku", 'name': 'casku', "width": "6%"},
                {"data": "uksku", 'name': 'uksku', "width": "6%"},
                {"data": "jpsku", 'name': 'jpsku', "width": "5%"},
                {"data": "fnsku", 'name': 'fnsku', "width": "7%"},
                {"data": "amazon_img_url", 'name': 'amazon_img_url',},
                {"data": "goods_img_url", 'name': 'goods_img_url',},
                {"data": "stock", 'name': 'stock',},
                {"data": "price", 'name': 'price',},
                {"data": null},
                {"data": null, 'name': 'admin_note'},
                {"data": null, 'name': 'custom_note'},
                {"data": null}
            ],
            "columnDefs": [
                {

                    "targets": 7,
                    "orderable": false,
                    "data": "amazon_img_url",
                    "render": function (data, type, row, meta) {
                        if (!data) {
                            return '<img class="center-block" height="66px" width="66px" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2440262118,2742320497&fm=27&gp=0.jpg"  alt="194x228">'
                        } else {
                            return '<img class="center-block img-responsive" height="66px" width="66px" src="http://img.susan.jiandanshang.com/upload/w_66/' + data + '">';
                        }

                    }
                },
                {
                    "targets": 8,
                    "orderable": false,
                    "data": "goods_img_url",
                    "render": function (data, type, row, meta) {
                        if (!data) {
                            return '<img class="center-block align-middle" height="66px" width="66px" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2440262118,2742320497&fm=27&gp=0.jpg"  alt="194x228">'
                        } else {
                            return '<img class="center-block img-responsive  align-middle"  height="66px" width="66px" src="http://img.susan.jiandanshang.com/upload/w_66/' + data + '">';
                        }

                    }
                },
                {
                    "targets": 11,
                    "orderable": false,
                    "data": null,
                    "render": function (data, type, row, meta) {
                        return (row.stock * row.price).toFixed(2)

                    }
                },
                {
                    "targets": 12,
                    "data": 'admin_note',
                    "render": function (data, type, row, meta) {
                        if (data.admin_note) {
                            return '<p class="text-wrap" style="width: 12rem;">' + data.admin_note + '</p>'
                        } else {
                            return ""
                        }
                    }
                },
                {
                    "targets": 13,
                    "data": 'custom_note',
                    "render": function (data, type, row, meta) {
                        if (data.custom_note) {
                            return '<p class="text-wrap" style="width: 12rem;">' + data.custom_note + '</p>'
                        } else {
                            return ""
                        }
                    }
                },

                {
                    "targets": -1,
                    "orderable": false,
                    "data": null,
                    "render": function (data, type, row, meta) {
                        return '<div class="">' +
                            '  <button type="button" class="btn btn-primary set-price">定价</button>' +
                            '  <button type="button" class="btn btn-default set-remark">备注</button>' +
                            '  <button type="button" class="btn btn-danger delete">删除</button>' +
                            '</div>'
                    }
                }
            ],
            language: {
                "sProcessing": "处理中...",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页"
                },
                "oAria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            }
        });
        /* END BASIC */


        $(".hasinput .form-control").on('keyup change', function () {
            otable.column($(this).parent().parent().index() + ':visible')
                .search(this.value)
                .draw();

        });


        $('#dt_basic').on('click', 'img', function () {
            $("#img_src").attr("src", $(this).attr("src").replace(/_66/, "_500"));
            $("#div_src")[0].className = ''
            $('#img').modal()
        });

        $('#dt_basic').on('click', '.set-price', function () {
            //获取行
            var row = $("#dt_basic tr").index($(this).closest("tr"));
            //获取某列（从0列开始计数）的值
            var id = $("#dt_basic").find("tr").eq(row).find("td").eq(0).text();
            var price = $("#dt_basic").find("tr").eq(row).find("td").eq(10).text()
            $("#goodId").val(id)
            $("#price").val(price)
            $('#price-modal').modal()
        });


        $("#set-price").on('click', function () {

            let id = $("#goodId").val()
            let price = $("#price").val()
            let data = {'price': price, 'id': id}
            $.post('/good/setPrice', data, function (res) {
                if (res.code == 200) {
                    $('#price-modal').modal('hide')
                    toastr.success(res.msg, '操作成功')
                    $("#dt_basic").DataTable().draw(false);
                } else {
                    toastr.error(res.msg, '操作失败')
                }
            })
        })
        $('#price').keydown(function (event) {
            if (event.keyCode == 13) $('#set-price').click();
        });


        $('#dt_basic').on('click', '.set-remark', function () {
            //获取行
            var row = $("#dt_basic tr").index($(this).closest("tr"));
            //获取某列（从0列开始计数）的值
            var id = $("#dt_basic").find("tr").eq(row).find("td").eq(0).text();
            var remark = $("#dt_basic").find("tr").eq(row).find("td").eq(12).text()
            $("#remark-goodId").val(id)
            $("#remark").val(remark)
            $('#remark-modal').modal()
        });

        $("#set-remark").on('click', function () {

            let id = $("#remark-goodId").val()
            let content = $("#remark").val()
            let data = {'content': content, 'id': id}

            $.post('/good/setRemark', data, function (res) {
                if (res.code == 200) {
                    $('#remark-modal').modal('hide')
                    toastr.success(res.msg, '操作成功')
                    $("#dt_basic").DataTable().draw(false);
                } else {
                    toastr.error(res.msg, '操作失败')
                }
            })
        })

        $('#remark').keydown(function (event) {
            if (event.keyCode == 13) $('#set-remark').click();
        });


        $('#dt_basic').on('click', '.delete', function () {
            //获取行
            var row = $("#dt_basic tr").index($(this).closest("tr"));
            //获取某列（从0列开始计数）的值
            var id = $("#dt_basic").find("tr").eq(row).find("td").eq(0).text();
            let data = {'id': id}
            $.post('/good/delete', data, function (res) {
                if (res.code == 200) {
                    toastr.success(res.msg, '操作成功')
                    $("#dt_basic").DataTable().draw(false);
                } else {
                    toastr.error(res.msg, '操作失败')
                }
            })
        });

        $('#in-modal').on('hidden.bs.modal', function (e) {
            // do something...
            $("#in-goodId").val("")
            $("#in-stock").val("")

        })

        $('#out-modal').on('hidden.bs.modal', function (e) {
            $("#out-goodId").val("")
            $("#out-stock").val("")
        })

        $('#remark-modal').on('hidden.bs.modal', function (e) {
            // do something...
            $("#remark-goodId").val("")
            $("#remark").val("")
        })


    });


</script>
